<!-- 商城页面 -->
<template>
  <!--  商品列表   -->
  <el-row :gutter="10">
    <el-col :span="6" v-for="p in paginatedMerchantArr" style="margin: 10px 0;">
  <!-- 商品卡片 -->
      <el-card @click="showMerchandise(p.id,p.userid)">
        <img :src="p.imgURL" style="width:100%;">
        <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{p.title}}</p>
        <div style="height: 21px;">
          <span style="float: left;color:#f00;">¥{{p.price}} <s>¥{{p.oldPrice}}</s></span>
          <span style="float: right;">销量:{{p.saleCount}}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div class="pagination-container">
    <el-pagination
        layout="prev, pager, next"
        :total="merchantArr.length"
        :page-size="pageSize"
        v-model:current-page="currentPage"
        @current-change="handlePageChange"
    />
  </div>
</template>
<script setup>
import {onMounted, ref,computed} from "vue";
import router from "@/router";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
//准备商品对象数组
const merchantArr = ref([]);
// 分页相关变量
const pageSize = 8;
const currentPage = ref(1);
// 计算属性，根据当前页码返回分页后的商品数组
const paginatedMerchantArr = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return merchantArr.value.slice(start, end);
});
// 处理页码变化
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

//定义加载商品数据的方法
const loadMerchant = ()=>{
  console.log("加载商品数据")
  axios.get(BASE_URL+'/v1/merchant/select')
      .then((response)=>{
        if(response.data.state == 2002){
          console.log(response.data);
          merchantArr.value = response.data.data;
          console.log(merchantArr.value);
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
onMounted(()=>{
  loadMerchant();
})
const showMerchandise = (id,userid) => {
  router.push('/merchandise?id=' + id + '&userId=' + userid)
};
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
</style>